<template>
	<view class="home">
		<view class="uni-common-mt">
			<view>
				<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline">
					<cover-view class="message">这是从快递点到派送点的距离示意图,派送时间:<cover-view style="color: #DD524D;">{{time}}</cover-view>
					</cover-view>
				</map>
				<view class="specs">@2021 Tencent - GS(2020)1720号 - Data@ NavInfo</view>
			</view>
		</view>

		<!-- 广告部分 -->
		<advers_list :advers="swipers"></advers_list>

		<view class="ad-view">
			<ad unit-id="" type="card" ad-intervals="100"></ad>
		</view>

		<button @click="openVideoAd">观看广告解锁全部内容</button>
	</view>
</template>

<script>
	import advers_list from '../../components/advertisement/advertisement.vue'
	// var QQMapWX = require('libs/qqmap-wx-jssdk.min.js');

	// var qqmapsdk;

	var videoAd = null;
	export default {
		data() {
			return {
				title: 'map',
				atitle: 'ad',
				latitude: 28.253045,
				longitude: 113.034482,
				markers: [],
				polyline: [],
				time: '15:00',
				resbannerdatas: [{
						src: '../../static/temp/temp1.jpg',
						title: '',
						subtitle: '',
						my: '0upx'
					},
					{
						src: '../../static/temp/temp3.jpg',
						title: '',
						subtitle: '',
						my: '0upx'
					},
					{
						src: '../../static/temp/temp2.jpg',
						title: '',
						subtitle: '',
						my: '1%'
					},
					{
						src: '../../static/temp/temp1.jpg',
						title: '',
						subtitle: '',
						my: '1%'
					}
				],
				swipers: [{
						id: 1,
						img: "../../static/temp/temp1.jpg"
					},
					{
						id: 2,
						img: "../../static/temp/temp2.jpg"
					},
					{
						id: 3,
						img: "../../static/temp/temp3.jpg"
					}
				]
			}
		},
		onLoad(options) {
			this.markers = [{
				title: '跑手出发点',
				latitude: parseFloat(options.now_y),
				longitude: parseFloat(options.now_x),
				iconPath: '../../static/icon/Error.png',
				label: {
					content: '起始点',
					color: '#F76350',
					bgColor: '#fff',
					padding: 5,
					borderRadius: 4
				},
				callout: {
					content: '跑手出发点',
					color: '#F76350',
					fontSize: 12
				}
			}, {
				latitude: parseFloat(options.give_y),
				longitude: parseFloat(options.give_x),
				iconPath: '../../static/icon/Error.png',
				title: '用户接收点',
				label: {
					content: '终点',
					color: '#F76350',
					bgColor: '#fff',
					padding: 5,
					borderRadius: 4
				},
				callout: {
					content: '用户接收点',
					color: '#F76350',
					fontSize: 12
				}
			}]


			this.polyline = [{
				'points': [{
					latitude: parseFloat(options.now_y),
					longitude: parseFloat(options.now_x)
				}, {
					latitude: parseFloat(options.give_y),
					longitude: parseFloat(options.give_x)
				}],
				color: '#000000',
				width: 2
			}]
			console.log(this.markers)
			// qqmapsdk = new QQMapWX({
			// 	key: 'PI7BZ-H4GKD-6C34M-HEIDH-NDAZK-GKFDS'
			// })

			// this.getAddress();
			// qqmapsdk.search({
			// 	keyword:'长沙学院',
			// 	location:{
			// 		latitude: this.jing,
			// 		longitude: this.wei
			// 	},
			// 	success: function(res) {
			// 		console.log(res);
			// 		console.log(res.data[0].address)
			// 	},
			// 	fail: function(res) {
			// 		console.log(res);
			// 	}
			// });
		},
		methods: {
			onload(e) {
				console.log("onload");
				// #ifdef MP
				this.adLoad()
				// #endif 
			},
			onclose(e) {
				console.log("onclose: " + e.detail);
			},
			onerror(e) {
				console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
			},
			openVideoAd: function() {
				if (videoAd) {
					videoAd.show().catch(err => {
						// 失败重试
						// console.log("广告拉去失败")
						videoAd.load().then(() => videoAd.show())
					})
				}
			},
			adLoad: function() {
				if (wx.createRewardedVideoAd) {
					videoAd = wx.createRewardedVideoAd({
						adUnitId: "xxxxxxxxxxx" //你的广告key
					})
					videoAd.onError(err => {})
					videoAd.onClose((status) => {
						if (status && status.isEnded || status === undefined) {
							//这里写广告播放完成后的事件
						} else {}
					})
				}
			},
			// getAddress() {
			// 	uni.getLocation({
			// 		type: 'gcj02',
			// 		altitude: true,
			// 		geocode: true,
			// 		success: (res) => {
			// 			console.log(res)
			// 			this.jing = res.latitude;
			// 			this.wei = res.longitude;
			// 			// console.log(this.jing,this.wei)
			// 		}
			// 	})
			// }
		},
		onShow() {

		},
		components: {
			advers_list
		}
	}
</script>

<style lang="scss">
	.home {
		width: 750rpx;

		.uni-common-mt {
			margin-bottom: 25px;

			.map {
				width: 100%;
				height: 800rpx;
				position: relative;

			}

			.specs {
				position: absolute;
				top: 710rpx;
				left: 20rpx;
				padding: 0 10rpx;
				font-size: 24rpx;
				background-color: #dfdfdf;
				height: 40rpx;
				line-height: 40rpx;
			}

		}



		.message {
			background: #fff;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			display: flex;
			margin: 30rpx;
			// border: 1px solid red;
			box-sizing: border-box;
			padding-left: 10px;

			cover-view {
				height: 100rpx;
				line-height: 100rpx;
				// border: 1px solid #00C2FF;
			}
		}

		.content {
			background-color: #DBDBDB;
			padding: 10px;
		}

		.ad-view {
			background-color: #FFFFFF;
			margin-bottom: 10px;
		}

	}
</style>
